<template>
  <el-container>
    <el-aside :width="sidebarWidth" class="layout-side-menu">
      <div class="layout-logo">
        <el-icon><Monitor /></el-icon>
        <transition name="fade">
          <span v-if="!appStore.sidebarCollapsed">TCM 智能助手</span>
        </transition>
      </div>
      <el-menu
        :collapse="appStore.sidebarCollapsed"
        router
        :default-active="activeRoute"
        class="layout-menu"
      >
        <el-menu-item index="/dashboard">
          <el-icon><House /></el-icon>
          <span>首页概览</span>
        </el-menu-item>
        <el-menu-item index="/questions">
          <el-icon><ChatDotRound /></el-icon>
          <span>智能问答</span>
        </el-menu-item>
        <el-menu-item index="/images">
          <el-icon><Picture /></el-icon>
          <span>影像分析</span>
        </el-menu-item>
        <el-menu-item index="/history">
          <el-icon><Notebook /></el-icon>
          <span>健康档案</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="layout-header">
        <div class="header-inner">
          <el-button text @click="appStore.toggleSidebar" class="collapse-trigger">
            <el-icon>
              <Fold v-if="!appStore.sidebarCollapsed" />
              <Expand v-else />
            </el-icon>
          </el-button>
          <div class="header-title">中医智能健康助手</div>
          <div class="header-actions">
            <el-tag type="success">Day 5</el-tag>
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="header-user">
                <el-avatar size="small" class="header-avatar">{{ userInitial }}</el-avatar>
                <span class="header-username">{{ displayName }}</span>
                <el-icon class="header-arrow"><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile" :disabled="true">
                    <el-icon><UserFilled /></el-icon>
                    <span>个人中心（开发中）</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="logout" divided>
                    <el-icon><SwitchButton /></el-icon>
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="layout-content">
          <slot />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { ArrowDown, ChatDotRound, Fold, Expand, House, Monitor, Notebook, Picture, SwitchButton, UserFilled } from '@element-plus/icons-vue';
import { useAppStore } from '@/store/modules/app';
import { useAuthStore } from '@/store/modules/auth';

const route = useRoute();
const router = useRouter();
const appStore = useAppStore();
const authStore = useAuthStore();

const activeRoute = computed(() => route.path);
const sidebarWidth = computed(() => (appStore.sidebarCollapsed ? '64px' : '220px'));
const displayName = computed(() => authStore.user?.username ?? '访客');
const userInitial = computed(() => displayName.value.charAt(0).toUpperCase());

const handleCommand = async (command: string) => {
  if (command === 'logout') {
    try {
      await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '退出',
        cancelButtonText: '取消',
        type: 'warning',
      });
      authStore.logout();
      ElMessage.success('已安全退出');
      router.replace('/login');
    } catch (error) {
      if (error === 'cancel' || error === 'close') {
        ElMessage.info('已取消退出');
      }
    }
  }
};
</script>

<style scoped lang="scss">
.layout-side-menu {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
}

.layout-menu {
  border-right: none;
  background: transparent;
  color: inherit;
  :deep(.el-menu-item) {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    &.is-active,
    &.is-active :deep(*) {
      color: #ffffff;
      background: rgba(59, 130, 246, 0.25);
      box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.45);
    }
    &:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #ffffff;
    }
  }
}

.layout-logo {
  color: #fff;
  justify-content: center;
}

.layout-header {
  background-color: #fff;
  border-bottom: 1px solid #e6e8eb;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.collapse-trigger {
  font-size: 1.2rem;
}

.header-title {
  font-weight: 600;
  font-size: 1.1rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-user {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: #1f2937;
  font-weight: 500;
}

.header-avatar {
  background: #2563eb;
  font-size: 0.85rem;
}

.header-username {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-arrow {
  color: #6b7280;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

